<template>
  <div
      class="centered-box"
      ref="centeredBox"
      @mousedown="startSlide"
      @mousemove="onSlide"
      @mouseup="stopSlide"
      @mouseleave="stopSlide"
      :style="{ backgroundImage: `url(${pictureUrl})` }"
  >
    <div class="max-circle"></div> <!-- 最大同心圆 -->

    <!-- 动态连线 -->
    <svg class="line-svg">
      <line
          x1="120"
          y1="120"
          :x2="lineEnd.x"
          :y2="lineEnd.y"
          stroke="orange"
          stroke-width="2"
      />
    </svg>

    <div class="orange-dot"></div>
    <div
        class="sun-svg-container"
        ref="sun"
        @mousedown.stop="startDrag"
        :style="{ left: `${position.x}px`, top: `${position.y}px` }"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="sun-svg">
        <circle cx="32" cy="32" r="12" fill="orange" />
        <g stroke="orange" stroke-width="2">
          <line x1="32" y1="2" x2="32" y2="14" />
          <line x1="32" y1="50" x2="32" y2="62" />
          <line x1="2" y1="32" x2="14" y2="32" />
          <line x1="50" y1="32" x2="62" y2="32" />
          <line x1="8" y1="8" x2="16" y2="16" />
          <line x1="48" y1="48" x2="56" y2="56" />
          <line x1="8" y1="56" x2="16" y2="48" />
          <line x1="48" y1="16" x2="56" y2="8" />
        </g>
      </svg>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const centeredBox = ref(null);
const sun = ref(null);
const position = ref({ x: 0, y: 0 }); // 太阳的中心位置
const dragging = ref(false);
const sliding = ref(false);
const offset = ref({ x: 0, y: 0 });
const sunRadius = 16; // 太阳的半径（根据svg）
const lineEnd = ref({ x: 0, y: 0 }); // 连接线的结束位置

const backgroundImages = [
  "https://dummyimage.com/220x220/fff/000&text=1",
"https://dummyimage.com/220x220/fff/000&text=2",
    "https://dummyimage.com/220x220/fff/000&text=3",

];
let currentImageIndex = 0;
const pictureUrl = ref(backgroundImages[currentImageIndex]);

const slideStartPosition = ref({ x: 0, y: 0 }); // 滑动开始的位置
let accumulatedDistance = 0; // 累计滑动距离
const distanceThreshold = 100; // 切换图片的滑动距离阈值

// 初始化太阳和容器中心重合
onMounted(() => {
  const box = centeredBox.value.getBoundingClientRect();
  position.value = {
    x: box.width / 2 - sunRadius, // 太阳的中心点与容器中心重合
    y: box.height / 2 - sunRadius,
  };

  // 初始化连线的终点位置
  lineEnd.value = {
    x: position.value.x + sunRadius,
    y: position.value.y + sunRadius,
  };
});

// 太阳拖拽功能
const startDrag = (event) => {
  dragging.value = true;
  const sunElement = sun.value;

  // 获取当前鼠标点击时的偏移量
  offset.value.x = event.clientX - sunElement.getBoundingClientRect().left;
  offset.value.y = event.clientY - sunElement.getBoundingClientRect().top;

  document.addEventListener("mousemove", onDrag);
  document.addEventListener("mouseup", stopDrag);
};

const onDrag = (event) => {
  if (!dragging.value) return;

  const box = centeredBox.value.getBoundingClientRect();

  // 计算太阳的左上角坐标
  let x = event.clientX - box.left - offset.value.x;
  let y = event.clientY - box.top - offset.value.y;

  // 计算同心圆的半径
  const maxRadius = box.width / 2;

  // 限制太阳位置
  const distanceFromCenter = Math.sqrt(
      Math.pow(x - box.width / 2, 2) + Math.pow(y - box.height / 2, 2)
  );
  const maxDistance = maxRadius;

  if (distanceFromCenter > maxDistance) {
    const angle = Math.atan2(y - box.height / 2, x - box.width / 2);
    x = box.width / 2 + Math.cos(angle) * maxDistance - sunRadius;
    y = box.height / 2 + Math.sin(angle) * maxDistance - sunRadius;
  }

  position.value = { x, y };

  // 更新连线终点
  lineEnd.value = {
    x: position.value.x + sunRadius,
    y: position.value.y + sunRadius,
  };
};

const stopDrag = () => {
  dragging.value = false;
  document.removeEventListener("mousemove", onDrag);
  document.removeEventListener("mouseup", stopDrag);
};

// 背景切换功能
const startSlide = (event) => {
  sliding.value = true;
  slideStartPosition.value = { x: event.clientX, y: event.clientY };
  accumulatedDistance = 0;
};

const onSlide = (event) => {
  if (!sliding.value) return;

  // 计算本次滑动距离
  const dx = event.clientX - slideStartPosition.value.x;
  const dy = event.clientY - slideStartPosition.value.y;
  const distance = Math.sqrt(dx * dx + dy * dy);

  accumulatedDistance += distance;
  slideStartPosition.value = { x: event.clientX, y: event.clientY };

  // 切换图片逻辑: 每次滑动超过阈值时切换到下一个图片
  if (accumulatedDistance >= distanceThreshold) {
    accumulatedDistance = 0; // 重置累计滑动距离
    if (dx>=0)
    {

      currentImageIndex = (currentImageIndex + 1) % backgroundImages.length;
    }else {
      if (currentImageIndex<=0)
      {
        currentImageIndex=backgroundImages.length - 1;
      }else {
        currentImageIndex=currentImageIndex-1
      }

    }

    pictureUrl.value = backgroundImages[currentImageIndex]; // 更新背景图片
  }
};

const stopSlide = () => {
  sliding.value = false;
};

// 清理事件监听器
onUnmounted(() => {
  document.removeEventListener("mousemove", onDrag);
  document.removeEventListener("mouseup", stopDrag);
});
</script>

<style scoped>
.centered-box {
  width: 240px;
  height: 240px;
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.max-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px dashed #333;
  box-sizing: border-box;
  max-width: 240px;
  max-height: 240px;
  pointer-events: none;
}

.sun-svg-container {
  position: absolute;
  cursor: grab;
  width: 31px;
  height: 31px;
}

.sun-svg {
  width: 31px;
  height: 31px;
}

.orange-dot {
  width: 10px;
  height: 10px;
  background-color: orange;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.line-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
</style>
